<template>
  <view class="task-container">
    <!-- 搜索表单 -->
    <view class="search-form">
      <view class="form-header">
        <text class="header-title">任务筛选</text>
        <text class="header-action" @click="toggleFilter">{{ showFilter ? '收起' : '展开' }}</text>
      </view>
      
      <view class="filter-content" v-if="showFilter">
        <view class="form-item">
          <text class="label">任务编号</text>
          <input 
            v-model="queryParams.taskCode" 
            class="input" 
            type="text" 
            placeholder="请输入任务编号"
          />
        </view>
        
        <view class="form-item">
          <text class="label">物料编号</text>
          <input 
            v-model="queryParams.materialCode" 
            class="input" 
            type="text" 
            placeholder="请输入物料编号"
          />
        </view>
        
        <view class="form-item">
          <text class="label">状态</text>
          <picker @change="onStatusChange" :value="statusIndex" :range="statusOptions" class="status-picker">
            <view class="picker-content">
              {{ statusOptions[statusIndex] || '全部' }}
            </view>
          </picker>
        </view>
      </view>
      
      <view class="btn-group">
        <button @click="handleReset" class="btn btn-default">重置</button>
        <button @click="handleQuery" class="btn btn-primary" :disabled="loading">
          <text v-if="loading" class="cuIcon-loading2 iconfont-spin"></text>
          {{ loading ? '查询中...' : '查询' }}
        </button>
      </view>
    </view>

    <!-- 任务列表 -->
    <view class="task-list" v-if="taskList.length > 0">
      <view 
        class="task-item" 
        v-for="(item, index) in taskList" 
        :key="index"
        @click="handleShowTaskDetail(item)"
      >
        <view class="item-header">
          <text class="task-code">{{ item.taskCode }}</text>
          <text :class="['task-status', {'status-normal': item.sts === '1', 'status-completed': item.sts === '2', 'status-canceled': item.sts === '3'}]">
            {{ item.sts === '1' ? '待执行' : item.sts === '2' ? '已完成' : item.sts === '3' ? '已取消' : '未知' }}
          </text>
        </view>
        
        <view class="info-section">
          <view class="info-row">
            <text class="label">物料编号:</text>
            <text class="value">{{ item.materialCode }}</text>
          </view>
          <view class="info-row">
            <text class="label">数量:</text>
            <text class="value">{{ item.number }} {{ item.unit || '件' }}</text>
          </view>
        </view>
        
        <view class="info-section">
          <view class="info-row">
            <text class="label">出库位置:</text>
            <text class="value">{{ item.fmloc || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">目标位置:</text>
            <text class="value">{{ item.target || '-' }}</text>
          </view>
        </view>
        
        <view class="item-footer">
          <text class="time">{{ formatTime(item.createTime) }}</text>
          <view class="action-buttons" v-if="item.sts === '1'">
            <button class="action-btn complete-btn" @click.stop="handleComplete(item)">完成</button>
            <button class="action-btn cancel-btn" @click.stop="handleCancel(item)">取消</button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else-if="!loading">
      <text class="empty-text">暂无任务数据</text>
    </view>
    
    <!-- 详情弹窗 -->
    <view class="popup-mask" v-if="showDetail" @click="closeDetail"></view>
    <view class="task-detail" v-if="showDetail">
      <view class="detail-header">
        <text class="detail-title">任务详情</text>
        <text class="close-btn" @click="closeDetail">×</text>
      </view>
      
      <scroll-view scroll-y="true" class="detail-content">
        <view class="detail-item" v-for="column in columns" :key="column.prop" v-if="currentTask[column.prop] !== null">
          <text class="detail-label">{{ column.label }}:</text>
          <text class="detail-value">{{ currentTask[column.prop] }}</text>
        </view>
      </scroll-view>
      
      <view class="detail-footer" v-if="currentTask.sts === '1'">
        <button class="action-btn cancel-btn" @click="handleCancel(currentTask)">取消任务</button>
        <button class="action-btn complete-btn" @click="handleComplete(currentTask)">完成任务</button>
      </view>
    </view>
  </view>
</template>

<script>
import { listMoveTasks, updateTaskStatus, cancelTask } from "@/api/system/task";

export default {
  data() {
    return {
      // 显示筛选条件
      showFilter: false,
      // 显示详情弹窗
      showDetail: false,
      // 当前任务详情
      currentTask: {},
      // 状态选项
      statusOptions: ['全部', '待执行', '已完成', '已取消'],
      statusIndex: 0,
      // 列字段定义
      columns: [
        { prop: 'materialCode', label: '物料编号' },
        { prop: 'number', label: '数量' },
        { prop: 'unit', label: '物料单位' },
        { prop: 'batchNumber', label: '批次号' },
        { prop: 'ownerCode', label: '货主' },
        { prop: 'weight', label: '重量' },
        { prop: 'volume', label: '体积' },
        { prop: 'fmloc', label: '出库库位' },
        { prop: 'target', label: '目的位置' },
        { prop: 'taskCode', label: '任务编号' },
        { prop: 'specifications', label: '规格型号' },
        { prop: 'ctl', label: '容器号' },
        { prop: 'extend', label: '扩展' },
        { prop: 'sts', label: '状态' },
        { prop: 'stockId', label: '库存ID' },
        { prop: 'createTime', label: '创建时间' },
        { prop: 'remark', label: '备注' }
      ],
      // 查询参数
      queryParams: {
        taskCode: '',
        materialCode: '',
        sts: '',
        pageNum: 1,
        pageSize: 10
      },
      // 任务列表数据
      taskList: [],
      // 总记录数
      total: 0,
      // 加载状态
      loading: false
    }
  },
  
  onLoad() {
    this.getList();
  },
  
  methods: {
    // 切换筛选条件显示
    toggleFilter() {
      this.showFilter = !this.showFilter;
    },
    
    // 状态选择变化
    onStatusChange(e) {
      this.statusIndex = e.detail.value;
      if (this.statusIndex === 0) {
        this.queryParams.sts = '';  // 全部
      } else {
        this.queryParams.sts = String(this.statusIndex);  // 转换为字符串状态值
      }
    },
    
    // 显示任务详情
    handleShowTaskDetail(task) {
      this.currentTask = task;
      this.showDetail = true;
    },
    
    // 关闭详情弹窗
    closeDetail() {
      this.showDetail = false;
      this.currentTask = {};
    },
    
    // 完成任务
    handleComplete(task) {
      this.$modal.confirm('是否确认完成该任务？').then(() => {
        updateTaskStatus({
          id: task.id,
          sts: '2'  // 状态改为已完成
        }).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess('任务已完成');
            this.closeDetail();
            this.getList();
          } else {
            this.$modal.msgError(res.msg || '操作失败');
          }
        });
      }).catch(() => {});
    },
    
    // 取消任务
    handleCancel(task) {
      this.$modal.confirm('是否确认取消该任务？').then(() => {
        cancelTask(task.id).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess('任务已取消');
            this.closeDetail();
            this.getList();
          } else {
            this.$modal.msgError(res.msg || '操作失败');
          }
        });
      }).catch(() => {});
    },
    
    // 查询按钮点击事件
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    
    // 重置按钮点击事件
    handleReset() {
      this.statusIndex = 0;
      this.queryParams = {
        taskCode: '',
        materialCode: '',
        sts: '',
        pageNum: 1,
        pageSize: 10
      };
      this.getList();
    },
    
    // 获取任务列表
    getList() {
      this.loading = true;
      listMoveTasks(this.queryParams)
        .then(res => {
          if (res.code === 200) {
            this.taskList = res.rows;
            this.total = res.total;
            
            // 可以从接口获取字段定义
            if (res.columns && res.columns.length > 0) {
              this.columns = res.columns;
            }
          } else {
            this.$modal.msgError(res.msg || '查询失败');
          }
        })
        .catch(error => {
          console.error('查询任务失败:', error);
          this.$modal.msgError('查询失败，请稍后重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return '-';
      // 这里可以根据需要格式化时间
      return time;
    }
  }
}
</script>

<style lang="scss" scoped>
.task-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 16px;
  position: relative;
}

.search-form {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  
  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .header-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    
    .header-action {
      font-size: 14px;
      color: #4A90E2;
    }
  }
  
  .filter-content {
    margin-bottom: 16px;
  }
  
  .form-item {
    margin-bottom: 16px;
    
    .label {
      display: block;
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
      font-weight: 500;
    }
    
    .input {
      width: 100%;
      height: 40px;
      background-color: #f8f9fa;
      border-radius: 4px;
      padding: 0 12px;
      font-size: 14px;
      color: #333;
    }
    
    .status-picker {
      width: 100%;
      height: 40px;
      background-color: #f8f9fa;
      border-radius: 4px;
      
      .picker-content {
        padding: 0 12px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #333;
      }
    }
  }
}

.btn-group {
  display: flex;
  justify-content: space-between;
  
  .btn {
    width: 48%;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    
    &.btn-default {
      background-color: #f8f9fa;
      color: #666;
    }
    
    &.btn-primary {
      background-color: #4A90E2;
      color: #fff;

      &:disabled {
        opacity: 0.7;
      }
    }
  }
}

.task-list {
  .task-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .task-code {
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }
      
      .task-status {
        font-size: 14px;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 4px;
        
        &.status-normal {
          color: #4A90E2;
          background-color: rgba(74, 144, 226, 0.1);
        }
        
        &.status-completed {
          color: #2ecc71;
          background-color: rgba(46, 204, 113, 0.1);
        }
        
        &.status-canceled {
          color: #e74c3c;
          background-color: rgba(231, 76, 60, 0.1);
        }
      }
    }
    
    .info-section {
      margin-bottom: 12px;
      
      .info-row {
        display: flex;
        margin-bottom: 8px;
        
        .label {
          width: 80px;
          font-size: 14px;
          color: #666;
        }
        
        .value {
          flex: 1;
          font-size: 14px;
          color: #333;
        }
      }
    }
    
    .item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0;
      
      .time {
        font-size: 12px;
        color: #999;
      }
      
      .action-buttons {
        display: flex;
        
        .action-btn {
          margin-left: 8px;
          font-size: 12px;
          padding: 6px 12px;
          border-radius: 4px;
          
          &.complete-btn {
            background-color: #4A90E2;
            color: #fff;
          }
          
          &.cancel-btn {
            background-color: #f8f9fa;
            color: #666;
          }
        }
      }
    }
  }
}

.empty-state {
  padding: 32px;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  
  .empty-text {
    font-size: 14px;
    color: #999;
  }
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.task-detail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 8px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    
    .detail-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    
    .close-btn {
      font-size: 20px;
      color: #999;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  }
  
  .detail-content {
    flex: 1;
    padding: 16px;
    max-height: 60vh;
    
    .detail-item {
      margin-bottom: 12px;
      
      .detail-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 4px;
        display: block;
      }
      
      .detail-value {
        font-size: 14px;
        color: #333;
      }
    }
  }
  
  .detail-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    border-top: 1px solid #f0f0f0;
    
    .action-btn {
      width: 48%;
      height: 40px;
      border-radius: 4px;
      font-size: 14px;
      
      &.complete-btn {
        background-color: #4A90E2;
        color: #fff;
      }
      
      &.cancel-btn {
        background-color: #f8f9fa;
        color: #666;
      }
    }
  }
}

.iconfont-spin {
  display: inline-block;
  animation: loading-rotate 2s linear infinite;
}

@keyframes loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 